<template>
  <!-- 预览图片组件 -->
  <view
    class="i-preview-image"
    :style="{ 'z-index': show ? 99 : -1 }"
    @click="close()"
  >
    <u-popup v-model="show" mode="center" width="100%" height="100%">
      <view class="btn-remove flex">
        <view
          @click="replace"
          v-show="showReplace"
          style="padding-right: 20rpx"
        >
          <i-icon
            icon="icontihuan"
            type="single"
            size="44rpx"
            color="#FBD220"
          ></i-icon>
          <!-- <text class="font-26 color-999">替换</text> -->
        </view>
        <view @click="remove(index)" v-show="showDel">
          <i-icon icon="iconlajitong" color="#FBD220" size="38rpx"></i-icon>
          <!-- <text class="font-26 color-999">删除</text> -->
        </view>
      </view>

      <swiper
        :autoplay="false"
        :current="current"
        @change="swiperChange"
        class="swiper-box"
      >
        <swiper-item v-for="(item, index) in imgs" :key="index">
          <view class="preview-item" @click="close()">
            <image :src="item" class="img" mode="widthFix"></image>
          </view>
        </swiper-item>
      </swiper>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'i-preview-image',
  model: {
    prop: 'imgs',
    event: 'upImgs',
  },
  props: {
    imgs: {
      type: Array,
      default: () => [],
    },
    preview: {
      type: Boolean,
      default: false,
    },
    // 预览第几张图片
    index: {
      type: Number,
      default: 0,
    },
    //删除按钮
    showDel: {
      type: Boolean,
      default: true,
    },
    //替换按钮
    showReplace: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {}
  },

  computed: {
    show: {
      set(v) {
        this.$emit('update:preview', v)
      },
      get() {
        return this.preview
      },
    },

    current: {
      set(v) {
        this.$emit('update:index', v)
      },
      get() {
        return this.index
      },
    },
  },

  methods: {
    // 监听图片切换
    swiperChange(e) {
      this.current = e.detail.current
    },

    close() {
      this.$emit('update:preview', false)
    },

    remove(index) {
      uni.showModal({
        title: '删除',
        content: '确认删除该图片？',
        success: (res) => {
          if (res.confirm) {
            let imgs = this.imgs
            imgs.splice(index, 1)
            this.current = index - 1
            this.$emit('upImgs', imgs)

            // 全部删除的话，就把当前预览弹框关闭
            if (imgs.length === 0) {
              this.show = false
              this.$emit('previewDelete')
            }
          }
        },
      })
    },

    replace() {
      this.$emit('replaceImg')
    },
  },
}
</script>

<style lang="scss" scoped>
.i-preview-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;

  // 删除按钮
  .btn-remove {
    position: absolute;
    /* #ifndef H5 */
    top: 30rpx;
    /* #endif */

    /* #ifdef H5 */
    top: 120rpx;
    /* #endif */
    right: 40rpx;
    z-index: 999;
  }

  .swiper-box {
    width: 100%;
    height: 100%;
  }

  .preview-item {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: auto;

    .img {
      width: 100%;
    }
  }
}
</style>
